﻿@page "/chart/stacked-bar"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart'>Blazor Stacked Bar Chart</a> example visualizes sales comparison of different fruits with default stacked bar series in the chart. Legend in the sample shows the information about the series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the stacked bar type chart. The stacking bar type chart stacks points in the series horizontally and you can also use the <code>StackingGroup</code> property to group stacking collections based on categories.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the stacked bar series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-bar'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Sales Comparison" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}%" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="AppleSales" Width="2" Name="Apple" Type="ChartSeriesType.StackingBar">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="OrangeSales" Width="2" Name="Orange" Type="ChartSeriesType.StackingBar">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="Wastage" Width="2" Name="Wastage" Type="ChartSeriesType.StackingBar">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StackedBarChartData> ChartPoints { get; set; } = new List<StackedBarChartData>
    {
        new StackedBarChartData { Month = "Jan", AppleSales = 6, OrangeSales = 6, Wastage = -1 },
        new StackedBarChartData { Month = "Feb", AppleSales = 8, OrangeSales = 8, Wastage = -1.5 },
        new StackedBarChartData { Month = "Mar", AppleSales = 12, OrangeSales = 11, Wastage = -2 },
        new StackedBarChartData { Month = "Apr", AppleSales = 15.5, OrangeSales = 16, Wastage = -2.5 },
        new StackedBarChartData { Month = "May", AppleSales = 20, OrangeSales = 21, Wastage = -3 },
        new StackedBarChartData { Month = "Jun", AppleSales = 24, OrangeSales = 25, Wastage = -3.5 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StackedBarChartData
    {
        public string Month { get; set; }
        public double AppleSales { get; set; }
        public double OrangeSales { get; set; }
        public double Wastage { get; set; }
    }
}
